<template>
  <div class="address-edit container">
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar left-icon="left"
      title="地址管理" @clickLeft="back" />
    <view class="" style="padding:30rpx">
      <view class="input_box u-flex u-ali-center u-ju-between " style="margin: 10rpx auto 30rpx;">
        <view class="">
          收货人
        </view>
        <input class="input_in" maxlength="11" type="text" v-model="addressInfo.name" placeholder="请输入收货人姓名（中文）">
      </view>
      <view class="input_box u-flex u-ali-center u-ju-between" style="margin: 0 auto 30rpx;">
        <view class="">
          手机号码
        </view>
        <input class="input_in" maxlength="11" type="text" v-model="addressInfo.tel" placeholder="请输入收货人手机号码">
      </view>
      <view class="input_box u-flex u-ali-center u-ju-between" style="margin: 0 auto 30rpx;">
        <view class="">
          所在地区
        </view>
        <pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
          <input class="input_in" type="text" v-model="addressInfo.address_detail" placeholder="请选择地区">
        </pick-regions>
        <!-- <picker @change="bindPickerChange" mode="multiSelector" :value="index" :range="addListi">
            
          </picker> -->
      </view>
      <view class="input_box u-flex u-ali-center u-ju-between" style="margin: 0 auto 30rpx;">
        <view class="">
          详细地址
        </view>
        <input class="input_in" type="text" v-model="addressInfo.address_all" placeholder="请输入详细收货地址">
      </view>
      <view class="input_box u-flex u-ali-center u-ju-between" style="margin: 0 auto 30rpx;">
        <view class="">
          设为默认
        </view>
        <u-switch v-model="is_default"></u-switch>
      </view>
      <view class="input_button" style="color: red;margin-bottom: 20rpx;" v-if="showDelete" @click.stop="onDelete()">
        删除收货地址
      </view>
      <button class="input_button" @click.stop="onSave()">
        确认修改
      </button>
    </view>

  </div>
</template>

<script>
  import {
    putAddress,
    delAddress
  } from '@/api/index.js'

  import areaList from '@/utils/area'
  import pickRegions from '@/components/pick-regions/pick-regions.vue'
  export default {
    name: 'AddressEdit',
    components: {
      pickRegions
    },
    data() {
      return {
        areaList: areaList,
        showDelete: false,
        region: [],
        defaultRegion: ['广东省', '广州市', '番禺区'],
        defaultRegionCode: '440113',
        addressInfo: {
          name: '',
          address_code: '',
          address_all: '',
          address_detail: '',
          tel: '',
          province: '',
          city: '',
          county: ''
        },
        is_check: false,
        areaShow: false,
        is_default: false,
        index: 1,
        type: ''
      }
    },
    watch: {
      'addressInfo.name'() {
        this.is_check = this.isCheck()
      },
      'addressInfo.tel'() {
        this.is_check = this.isCheck()
      },
      'addressInfo.address_all'() {
        this.is_check = this.isCheck()
      },
      'addressInfo.address_detail'() {
        this.is_check = this.isCheck()
      }
    },

    computed: {
      regionName() {
        // 转为字符串
        return this.region.map(item => item.name).join(' ')
      }
    },
    onLoad(opt) {
      const __type = opt.type
      this.type = opt.type
      if (__type == 2) {
        let list = this.$ui.getStorage('addList')
        this.addressInfo = list
        this.is_default = this.addressInfo.isDefault
        this.showDelete = true
      }
    },
    methods: {
      // 获取选择的地区
      handleGetRegion(region) {
        this.region = region
        this.addressInfo.address_detail = region[0].name + ' ' + region[1].name + " " + region[2].name
      },
      /**
       * 返回
       */
      back() {
        uni.navigateBack()
      },
      formatter(value) {
        // 只能输入汉字
        return value.replace(/[^\u4E00-\u9FA5]/g, '');
      },

      onSave() {
        const vm = this
        // 仅测试数据时使用
        let statuus = ''
        // status: 0: 新增 1：修改
        if (vm.is_default) {
          statuus = 1
        } else {
          statuus = 0
        }
        let id = ''
        if(this.type == 2){
          id = vm.addressInfo.id
          console.log(id);
        }else {
          id = ''
        }
        putAddress({
          id: id,
          address_code: vm.region && vm.region[0] && vm.region[0].code || '',
          status: statuus,
          tel: vm.addressInfo.tel,
          address_all: vm.addressInfo.address_all,
          address_detail: vm.addressInfo.address_detail,
          name: vm.addressInfo.name
        }).then(res => {
          if (res.code == 1) {
            vm.$ui.toast(res.msg)
            setTimeout(function() {
              vm.$router.go(-1)
            }, 1500)
          }
        })
      },
      // 删除地址
      onDelete() {
        console.log(12123132);
        const vm = this
        vm.$ui.show('提示', '确认删除地址吗', true).then(res => {
          console.log(res, 123123);
          if (res.confirm) {
            delAddress({
              id: vm.addressInfo.id
            }).then(res => {
              if (res.code === 1) {
                vm.$ui.toast(res.msg)
                setTimeout(function() {
                  uni.navigateBack()
                }, 1500)
              }
            })
          }
        })
      },
      // 验证
      isCheck() {
        const vm = this
      },
      // 确认选择地址
      sureArea(e) {
        this.addressInfo.address_detail = e[0].name + ' ' + e[1].name + ' ' + e[2].name
        this.addressInfo.province = e[0].name
        this.addressInfo.city = e[1].name
        this.addressInfo.county = e[2].name
        this.addressInfo.address_code = e[2].code
        this.areaShow = false
      }
    }
  }
</script>

<style lang="less">
  .address-edit {
    // height: 100vh;
    background: #ffffff;

    .u--input__label,
    .u--input__control {
      color: #323233;
    }

    .van-cell {
      border-bottom: 2rpx solid #efefef;
      padding: 28rpx 20rpx;
      margin: 0;
      border-radius: 0;
    }

    .u--input__control:disabled {
      -webkit-text-fill-color: #282828;
    }

    .u--input__control::placeholder {
      -webkit-text-fill-color: #969799;
    }

    .van-texteare {
      height: 200rpx;
    }

    .u--input__body,
    .u--input__control {
      width: 100%;
      height: 100%;
    }

    .van-cell__title {
      color: #747381;
      width: 220rpx;
    }

    .van-del .van-cell__title {
      color: #ff0000;
      font-size: 32rpx;
    }

    .van-switch-cell {
      border-bottom: none;
    }

    .van-switch--on {
      font-size: 20rpx;
      background: #010101;
      transform: scale(0.8);
    }

    .van-button--danger {
      background: #49d10d;
      border-color: #121316;
    }

    .vant-btn {
      width: 100%;
      position: fixed;
      bottom: 0;
      padding: 0 30rpx 110rpx;
      margin: 0;

      .van-button {
        font-size: 28rpx;
        border-radius: 44rpx;
      }
    }

    .van-picker__cancel {
      color: #676767;
      font-size: 26rpx;
    }

    .van-picker__title {
      color: #060606;
      font-size: 32rpx;
    }

    .van-picker__confirm {
      color: #282828;
      font-size: 26rpx;
    }
  }
</style>
